<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	    <!-- Fonts -->
	    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
	    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
	    <!-- CSS Libs -->
	    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/font-awesome.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/animate.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-switch.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/checkbox3.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-table.min.css" />
	    <!-- CSS App -->
	    <link rel="stylesheet" type="text/css" href="../css/style.css">
	    <link rel="stylesheet" type="text/css" href="../css/themes/flat-blue.css">
	</head>
	<body>
        <div class="card">
            <div class="card-body no-padding">
                <table id="table"></table>
				<div id="toolbar">
					<button class="btn-success">新增</button>
					<button class="btn-success">更新</button>
					<button class="btn-success">删除</button>
					<button class="btn-success">查看</button>
					<button class="btn-success">导入</button>
					<button class="btn-success">导出</button>
				</div>
	        </div>
        </div>
        
	    <!-- Javascript Libs -->
        <script type="text/javascript" src="../lib/js/jquery.min.js"></script>
	    <script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
	    <script type="text/javascript" src="../lib/js/Chart.min.js"></script>
	    <script type="text/javascript" src="../lib/js/bootstrap-switch.min.js"></script>
	
	    <script type="text/javascript" src="../lib/js/jquery.matchHeight-min.js"></script>
	    <script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
	    <script type="text/javascript" src="../lib/js/bootstrap-table.min.js" ></script>
	    <script type="text/javascript" src="../lib/js/bootstrap-table-zh-CN.min.js" ></script>
	    <script type="text/javascript" src="../lib/js/treegrid.js" ></script>
	    <script type="text/javascript" src="../lib/js/ace/ace.js"></script>
	    <script type="text/javascript" src="../lib/js/ace/mode-html.js"></script>
	    <script type="text/javascript" src="../lib/js/ace/theme-github.js"></script>
	    <!-- Javascript -->
	    <script type="text/javascript" src="../js/_app.js"></script>
	    <script type="application/javascript">
	    	$(function(){
				$('#table').bootstrapTable({
					columns: [{
						field: 'Name',
				        title: 'Item Name'
			        }, {
				        field: 'Id',
				        title: 'Item ID'
			        }],
                    url: "data_treegrid.json",
                    toolbar: '#toolbar',
                    sidePagination: 'client',
                    pagination: false,
                    treeView: true,
                    treeId: "Id",
                    treeField: "Name",
                    treeRootLevel: 1,
                    clickToSelect: true,//collapseIcon: "glyphicon glyphicon-triangle-right",//折叠样式
                    //expandIcon: "glyphicon glyphicon-triangle-bottom"//展开样式
               });
			});
			
			$("#search").click(function(){
				var params = {};
				$.each($("#query-from").serializeArray(), function(i, data) {
					params[data.name] = data.value;
				});
				$('#table').bootstrapTable('refresh', {query : params});
			});
	    </script>
	</body>
</html>
